<template>
  <div class="home-page">
    <div class="header">数据更新截止时间：{{ currentTime }}</div>
    <div class="flow-wrap">
      <!--泳道-->
      <div class="step" >
        <div class="step-title-revnue">合同管理</div>
        <!--节点-->
        <div class="step-item-reven" style="left:180px;top:90px;">创建/<br>变更合同</div>
        <!--超链接-->
        <!--文本-->
        <!--线-->
        <div class="step-line" style="left:250px;top:104px;width:26px;"></div>
        <div class="step-line" style="left:250px;top:104px;width:42px;"></div>
        <div class="step-line verline" style="left:276px;top:104px;height:430px;"></div>

        <div class="step-line verline" style="left:292px;top:104px;height:270px;"></div>
        <div class="step-line" style="left:292px;top:374px;width:160px;"></div>


        <!--箭头-->
        <div class="step-line-arrow to_right" style="left:452px;top:371px;"></div>

      </div>
      <div class="step" >
        <div class="step-title-revnue">工程</div>
        <div class="step-item" style="left:180px;top:70px;">立项设计</div>
        <div class="step-item" style="left:460px;top:70px;">实施</div>
        <div class="step-item" style="left:740px;top:70px;">内部验收</div>
        <div class="step-item" style="left:1020px;top:70px;">完工交维</div>
        <!--超链接-->
        <div class="step-link" style="left:70px;top:130px;" @click="$router.push({name:'biz-mrp'})">
          <img class="imgico" :src="imageType.normal" />
          物资参考提示
        </div>
        <div class="step-link" style="left:710px;top:43px;" @click="$router.push({name:'biz-emc'})">
          <img class="imgico" :src="imageType.normal" />
          工程物资一致性检查
        </div>
        <!--文本-->
        <div class="step-link step-line-text" style="left:315px;top:76px;font-size:2px;" >
          项目数据
        </div>
        <div class="step-link step-line-text" style="left:615px;top:76px;font-size:2px;" >
          项目数据
        </div>        
        <div class="step-link step-line-text" style="left:580px;top:126px;font-size:2px;" >
          设计清单数据
        </div>
        <div class="step-link step-line-text" style="left:900px;top:76px;font-size:2px;" >
          项目数据
        </div>
        <div class="step-link step-line-text" style="left:814px;top:112px;font-size:2px;" >
          项目状态数据
        </div>
        <!--线-->
        <div class="step-line verline" style="left:215px;top:98px;height:146px;"></div>
        <div class="step-line" style="left:215px;top:244px;width:236px;"></div>
        <div class="step-line" style="left:250px;top:84px;width:206px;"></div>
        <div class="step-line" style="left:530px;top:84px;width:206px;"></div>
        <div class="step-line" style="left:810px;top:84px;width:206px;"></div>
        <div class="step-line verline" style="left:240px;top:98px;height:36px;"></div>
        <div class="step-line" style="left:240px;top:134px;width:506px;"></div>
        <div class="step-line verline" style="left:746px;top:102px;height:33px;"></div>
        <div class="step-line verline" style="left:496px;top:104px;height:116px;"></div>
        <div class="step-line verline" style="left:802px;top:98px;height:22px;"></div>
        <div class="step-line" style="left:802px;top:120px;width:110px;"></div>
        <div class="step-line verline" style="left:912px;top:120px;height:92px;"></div>
        <div class="step-line verline" style="left:912px;top:248px;height:16px;"></div>
        <div class="step-line " style="left:216px;top:264px;width:697px;"></div>
        <div class="step-line verline" style="left:216px;top:264px;height:100px;"></div>
        <div class="step-line verline" style="left:774px;top:248px;height:24px;"></div>
        <div class="step-line " style="left:380px;top:272px;width:395px;"></div>
        <div class="step-line verline" style="left:380px;top:272px;height:94px;"></div>
        <div class="step-line verline" style="left:360px;top:304px;height:86px;"></div>
        <div class="step-line " style="left:360px;top:304px;width:225px;"></div>
        <div class="step-line verline" style="left:585px;top:170px;height:135px;"></div>
        <div class="step-line " style="left:585px;top:170px;width:175px;"></div>
        <div class="step-line verline" style="left:760px;top:103px;height:68px;"></div>
        <div class="step-line verline" style="left:788px;top:103px;height:88px;"></div>
        <div class="step-line " style="left:613px;top:190px;width:175px;"></div>
        <div class="step-line verline" style="left:613px;top:190px;height:148px;"></div>
        <div class="step-line " style="left:494px;top:338px;width:120px;"></div>
        <div class="step-line verline" style="left:494px;top:338px;height:30px;"></div>
        <div class="step-line verline" style="left:514px;top:328px;height:40px;"></div>
        <div class="step-line " style="left:514px;top:328px;width:320px;"></div>
        <div class="step-line verline" style="left:834px;top:140px;height:189px;"></div>
        <div class="step-line " style="left:802px;top:140px;width:32px;"></div>
        <div class="step-line verline" style="left:802px;top:100px;height:40px;"></div>



        <!--箭头-->
        <div class="step-line-arrow to_right" style="left:451px;top:240px;"></div>
        <div class="step-line-arrow to_top" style="left:197px;top:98px;"></div>
        <div class="step-line-arrow to_right" style="left:452px;top:81px;"></div>
        <div class="step-line-arrow to_right" style="left:732px;top:81px;"></div>
        <div class="step-line-arrow to_right" style="left:1012px;top:81px;"></div>
        <div class="step-line-arrow to_top" style="left:743px;top:98px;"></div>
        <div class="step-line-arrow to_top" style="left:493px;top:98px;"></div>
        <div class="step-line-arrow to_bottom" style="left:909px;top:212px;"></div>
        <div class="step-line-arrow to_bottom" style="left:213px;top:364px;"></div>
        <div class="step-line-arrow to_bottom" style="left:377px;top:364px;"></div>
        <div class="step-line-arrow to_top" style="left:756px;top:98px;"></div>
        <div class="step-line-arrow to_top" style="left:784px;top:98px;"></div>
        <!-- <div class="step-line-arrow to_bottom" style="left:491px;top:362px;"></div> -->
        <div class="step-line-arrow to_bottom" style="left:510px;top:362px;"></div>

      </div>
      <div class="step" >
        <div class="step-title-revnue">商务合作</div>
        <div class="step-item-reven" style="left:40px;top:70px;">供应商<br>认证</div>
        <div class="step-item" style="left:460px;top:70px;">采购</div>
        <div class="step-item" style="left:740px;top:70px;">到货确认</div>
        <div class="step-item" style="left:880px;top:70px;">商合结算</div>

        <!--超链接-->
        <div class="step-link" style="left:376px;top:33px;" >
          <img class="imgico" :src="imageType.normal" />
          采购支付风险防控
        </div>
        <div class="step-link" style="left:956px;top:33px;" @click="$router.push({name:'biz-mc'})">
          <img class="imgico" :src="imageType.normal" />
          采购、入库、付款单据匹配检查
        </div>
        
        <!--文本-->
        <div class="step-link step-line-text" style="left:130px;top:74px;font-size:2px;" >
          供应商<br>认证信息
        </div>
        <div class="step-link step-line-text" style="left:220px;top:54px;font-size:2px;" >
          采购订单<br>信息
        </div>
        <div class="step-link step-line-text" style="left:360px;top:64px;font-size:2px;" >
          合同信息
        </div>
        <div class="step-link step-line-text" style="left:360px;top:87px;font-size:2px;" >
          物料数据
        </div>
        <div class="step-link step-line-text" style="left:460px;top:116px;font-size:2px;" >
          采购订单
        </div>
        <div class="step-link step-line-text" style="left:650px;top:74px;font-size:2px;" >
          采购订单
        </div>
        <div class="step-link step-line-text" style="left:650px;top:104px;font-size:2px;" >
          结算数据
        </div>
        <div class="step-link step-line-text" style="left:816px;top:76px;font-size:2px;" >
          采购订单
        </div>
        <div class="step-link step-line-text" style="left:650px;top:170px;font-size:2px;" >
          项目状态信息
        </div>
        <div class="step-link step-line-text" style="left:640px;top:13px;font-size:2px;" >
          成本单数据
        </div>
        <div class="step-link step-line-text" style="left:778px;top:3px;font-size:2px;" >
          工程物料<br>到货数据
        </div>
        <!--线-->
        <div class="step-line" style="left:110px;top:84px;width:90px;"></div>
        <div class="step-line verline" style="left:200px;top:-47px;height:132px;"></div>
        <div class="step-line" style="left:530px;top:84px;width:206px;"></div>
        <div class="step-line" style="left:810px;top:84px;width:66px;"></div>

        <div class="step-line" style="left:230px;top:84px;width:230px;"></div>
        <div class="step-line verline" style="left:230px;top:-46px;height:130px;"></div>
        <!-- <div class="step-line verline" style="left:1030px;top:-46px;height:130px;"></div> -->
        <div class="step-line verline" style="left:775px;top:-50px;height:120px;"></div>



        <!--箭头-->
        <div class="step-line-arrow to_right" style="left:732px;top:81px;"></div>
        <div class="step-line-arrow to_right" style="left:872px;top:81px;"></div>
        <div class="step-line-arrow to_top" style="left:227px;top:-52px;"></div>
        <div class="step-line-arrow to_top" style="left:771px;top:-52px;"></div>
      </div>
      <div class="step" >
        <div class="step-title-revnue">支付</div>
        <div class="step-item" style="left:40px;top:70px;">计提摊销</div>
        <div class="step-item" style="left:180px;top:70px;">报账</div>
        <div class="step-item" style="left:320px;top:70px;">入账</div>
        <div class="step-item" style="left:460px;top:70px;">资产装配</div>
        <div class="step-item" style="left:600px;top:70px;">自动转资</div>
        <div class="step-item" style="left:740px;top:70px;">结算调整</div>
        <div class="step-item" style="left:880px;top:70px;">决算调整</div>
        <div class="step-item" style="left:1020px;top:70px;">竣工决算</div>

        <!--超链接-->
        <div class="step-link" style="left:426px;top:120px;" @click="$router.push({name:'biz-psr'})">
          <img class="imgico" :src="imageType.normal" />
          项目状态实时获取
        </div>
        <!--文本-->
        <div class="step-link step-line-text" style="left:252px;top:14px;font-size:2px;" >
          合同供<br>应商信息
          </div>
        <div class="step-link" style="left:136px;top:104px;" @click="$router.push({name:'biz-sr'})">
          <img class="imgico" :src="imageType.normal" />
          结算报账发起合规性检查
        </div>
        <div class="step-link" style="left:136px;top:125px;font-size:10px;" @click="$router.push({name:'biz-cvrp'})">
          <img class="imgico" :src="imageType.normal" />
          财务报账信息校验-合同信息校验
        </div>
        <!--线-->
        <div class="step-line" style="left:116px;top:84px;width:64px;"></div>
        <div class="step-line" style="left:256px;top:84px;width:21px;"></div>

        <div class="step-line" style="left:390px;top:84px;width:66px;"></div>
        <div class="step-line" style="left:530px;top:84px;width:66px;"></div>
        <div class="step-line" style="left:670px;top:84px;width:66px;"></div>
        <div class="step-line" style="left:810px;top:84px;width:66px;"></div>

        <!--箭头-->
        <div class="step-line-arrow to_left" style="left:250px;top:81px;"></div>
        <div class="step-line-arrow to_left" style="left:110px;top:81px;"></div>
        <div class="step-line-arrow to_right" style="left:450px;top:81px;"></div>
        <div class="step-line-arrow to_right" style="left:590px;top:81px;"></div>
        <div class="step-line-arrow to_right" style="left:730px;top:81px;"></div>
        <div class="step-line-arrow to_right" style="left:870px;top:81px;"></div>
      </div>
    </div>
  </div>
</template>

<style>
  .home-page {
    position: relative;
    width: 100%;
    border-right: 1px solid #f4f4f4;
    background: #fff;
  }

  .home-page>.header {
    height: 30px;
    line-height: 30px;
    font-size: 12px;
    background: #eaeaea;
    border-bottom: 1px solid #c7c7c7;
    text-align: center;
  }

  .home-page>.flow-wrap {
    overflow: auto;
  }

  .flow-wrap>.step {
    position: relative;
    width: 100%;
    min-width: 1120px;
    height: 150px;
    border-bottom: 1px dashed #bababa;
  }

  .step .step-title {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 30px;
    font-size: 13px;
    text-align: center;
    font-weight: bold;
    line-height: 20px;
    background: #c7eaf6;
    padding: 60px 5px;
  }

 .step .step-title-revnue {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 30px;
    font-size: 13px;
    text-align: center;
    font-weight: bold;
    background: #c7eaf6;
    
    /* padding: 60px 5px; */

    display: -webkit-box;
  -webkit-box-orient: horizontal;
  -webkit-box-pack: center;
  -webkit-box-align: center;

  display: -moz-box;
  -moz-box-orient: horizontal;
  -moz-box-pack: center;
  -moz-box-align: center;

  display: -o-box;
  -o-box-orient: horizontal;
  -o-box-pack: center;
  -o-box-align: center;

  display: -ms-box;
  -ms-box-orient: horizontal;
  -ms-box-pack: center;
  -ms-box-align: center;

  display: box;
  box-orient: horizontal;
  box-pack: center;
  box-align: center;
  }

  .step-title.offset15 {
    padding-top: 50px;
  }

  .step-item {
     position: absolute;
    height: 28px;
    min-width: 70px;
    line-height: 28px;
    font-size: 12px;
    background: #0053a7;
    border: 1px solid #044689;
    color: #fff;
    text-align: center;
    border-radius: 3px;
    padding: 0 10px;
    cursor: default;
  }

 .step-item-reven {
    position: absolute;
    /* height: 28px; */
    width: 70px;
    font-size: 12px;
    background: #0053a7;
    border: 1px solid #044689;
    color: #fff;
    text-align: center;
    border-radius: 3px;
    cursor: default;
    /* transform: scale(0.6); */
    white-space: pre-wrap;
  }

  .step-item:hover {
    background: #044689;
  }

  .step .flow-lendge {
    position: absolute;
    width: 600px;
  }

  .step .step-link {
    position: absolute;
    font-size: 12px;
    cursor: pointer;
    z-index: 5;
  }

  .step .step-link:hover {
    color: #4390ea;
  }


  .step-link .imgico {
    width: 16px;
    height: 16px;
    margin-right: 0px;
    margin-top: -6px;
  }

  .flow-lendge>.lendge-item {
    float: left;
    margin-right: 15px;
    font-size: 12px;
    height: 24px;
    line-height: 24px;
  }

  .lendge-item .imgico {
    width: 16px;
    height: 16px;
    margin-right: 5px;
    margin-top: -4px;
  }

  .step-item.lgbtn {
    width: 200px;
    cursor: pointer;
  }

  .step-item.lgbtn:hover {
    background: #fff;
    color: #0053a7;
    font-weight: 550;
  }

  .step-line {
    position: absolute;
    height: 1px;
    border-bottom: 1px solid #666;
  }

  .step-line.verline {
    width: 1px;
    border-bottom: none;
    border-left: 1px solid #666;
  }

  .step-line-arrow {
    position: absolute
  }

  .step-line-arrow.to_top {
    width: 0;
    height: 0;
    border-bottom: 8px solid #666;
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
  }

  .step-line-arrow.to_bottom {
    width: 0;
    height: 0;
    border-top: 8px solid #666;
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
  }

  .step-line-arrow.to_left {
    width: 0;
    height: 0;
    border-right: 8px solid #666;
    border-top: 4px solid transparent;
    border-bottom: 4px solid transparent;
  }

  .step-line-arrow.to_right {
    width: 0;
    height: 0;
    border-left: 8px solid #666;
    border-top: 4px solid transparent;
    border-bottom: 4px solid transparent;
  }
  .step-line-text{
      background-color: #fff;
      font-size: 50%;
  }
</style>

<script>

  export default {
    data() {
      return {
        currentTime: '2020-12-01 00:00:00',
        icoType: 'normal',
        imageType:{
          normal:require("@/assets/img/normal.png"),
          error:require("@/assets/img/error.png"),
          warning:require("@/assets/img/warning.png")
        },
        sceneImage:{
           'scene1.5':require("@/assets/img/normal.png"),
           'scene2.2':require("@/assets/img/normal.png"),
           'scene2.3':require("@/assets/img/normal.png"),
           'scene2.6':require("@/assets/img/normal.png"),
           'scene2.8':require("@/assets/img/normal.png"),
           'scene2.9':require("@/assets/img/normal.png"),
           'scene2.10':require("@/assets/img/normal.png"),
           'scene2.11':require("@/assets/img/normal.png"),
           'scene2.12':require("@/assets/img/normal.png"),
           'scene2.13':require("@/assets/img/normal.png"),
           'scene2.14':require("@/assets/img/normal.png"),
           'scene2.15':require("@/assets/img/normal.png"),
           'scene2.16':require("@/assets/img/normal.png"),
           'scene2.17':require("@/assets/img/normal.png"),
           'scene2.18':require("@/assets/img/normal.png"),
           'scene2.21':require("@/assets/img/normal.png"),
           'scene2.22':require("@/assets/img/normal.png"),
           'scene2.23':require("@/assets/img/normal.png"),
           'scene2.25':require("@/assets/img/normal.png")
        }
      }
    },
    created() {
      this.setCurrentTime()
      this.queryPageCount('*')

      console.log("当前用户:["+sessionStorage.getItem('userName')+"]");
    },
    computed: {
    },
    methods: {
      dateFormat(date) {
        const timeDate = new Date(date.getTime() + (8 * 3600 * 1000))
        const timeDateString = timeDate.toJSON()
        return timeDateString.replace('T', ' ').slice(0, 19)
      },
      setCurrentTime() {
        this.currentTime = this.dateFormat(new Date())
      },
      setSceneImage(scene,per){
          var key = 'scene'+scene;
          if(per > 0.4 && per <= 0.7){
             this.sceneImage[key]=this.imageType.warning;
          }else if(per > 0.7){
             this.sceneImage[key]=this.imageType.error;
          }else{
            this.sceneImage[key]=this.imageType.normal;
          }
      },
      async queryPageCount(scene) {
        try {
          const r = await this.$http({
            url: this.$http.adornBizUrl('/log/queryStatistics'),
            method: 'post',
            data: this.$http.adornData('param=' + JSON.stringify({scene:scene}), false),
            headers: {
              'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8'
            }
          })
          //console.log(r.data.data);
          var self = this;
          if(r.data.data && r.data.data.length >0){
              var scenes = r.data.data;
              scenes.forEach((item,i)=>{
                  self.setSceneImage(item.scene,item.per);
              });
          }
        } catch (e) {
          console.log(e)
        } finally {
        }
      }
    }
  }
</script>
